<script setup lang="ts">
// import { useObserver } from '@/hooks';
import Button from './myButton.vue';
import Buttons from './myButton copy.vue';
import Count from './myGoods-count.vue';
import myCount from './myGoods-count copy.vue';
import { ref, onUnmounted } from 'vue';
// 异步加载，需要使用时再加载
// Suspense 配合异步加载，添加状态
import { defineAsyncComponent } from 'vue';
const TestCom = defineAsyncComponent(() => import('./myButton.vue'));

// const { target } = useObserver();
const modelValue = ref(1);
const count = ref(0);
let timer = 0;
const start = (time = 60) => {
  if (count.value) return;
  count.value = time;
  timer = setInterval(() => {
    count.value--;
    if (count.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};
onUnmounted(() => clearInterval(timer));
</script>

<template>
  <!-- <div style="height: 2000px">
    <div style="height: 2000px"></div>
    <div ref="target">您已进入可是区域</div>
  </div>
  <div style="height: 2000px"></div> -->
  <Button size="sper" type="primary">按钮</Button>
  <Button>anniu2</Button>
  <Buttons>jjj</Buttons>
  <Buttons size="middle" type="primary">jjj</Buttons>
  <hr />
  <br />
  <br />
  <br />
  <br />
  <br />
  <Count
    islabel
    :modelValue="modelValue"
    @update:modelValue="(val:number) => modelValue=val"
  ></Count>

  <Count islabel v-model="modelValue"></Count>
  <hr />
  <br />
  <br />
  <br />
  <br />
  <br />
  <myCount
    islabel
    :modelValue="modelValue"
    @update:modelValue="(val:number) => modelValue = val"
  ></myCount>
  <myCount islabel v-model="modelValue"></myCount>

  <!-- 倒计时按钮 -->
  <button @click="start(5)">{{ count === 0 ? '发送验证码' : count }}</button>

  =====================================================================================
  <div>异步加载组件</div>
  <!-- Suspense可以给异步组件添加等待状态 -->
  <Suspense>
    <TestCom>异步加载的按钮</TestCom>

    <template #fallback>
      <h1>
        疯狂加载等待中...疯狂加载等待中...疯狂加载等待中...疯狂加载等待中...疯狂加载等待中...
      </h1>
    </template>
  </Suspense>
</template>

<style lang="less" scoped></style>
